<%@ page import="java.util.List" %>
<%--
  Created by IntelliJ IDEA.
  User: 15c
  Date: 2018/1/27
  Time: 1:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="sf" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="pg" uri="http://jsptags.com/tags/navigation/pager" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--
  Created by IntelliJ IDEA.
  User: 15c
  Date: 2017/12/20
  Time: 22:00
  To change this template use File | Settings | File Templates.
--%>
<!DOCTYPE html>
<html>

<head>
    <title>知游管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CSS Libs -->
    <link rel="stylesheet" type="text/css" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <!-- CSS App -->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/indexStyle.css">
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/resource/bootstrap-3.3.7-dist/css/flat-blue.css">
    <style>
        .nav-li:hover {
            border-bottom: 1px solid #ccc
        }

        .table th, .table td {
            text-align: center;
            vertical-align: middle !important;
        }

        .btm-input {
            border-radius: 5px
        }


    </style>
    <%--获取时间--%>
    <script type="text/javascript">
        function setDateTime() {
            var date = new Date();
            var day = date.getDay();
            var week;
            switch (day) {
                case 0:
                    week = "星期日";
                    break;
                case 1:
                    week = "星期一";
                    break;
                case 2:
                    week = "星期二";
                    break;
                case 3:
                    week = "星期三";
                    break;
                case 4:
                    week = "星期四";
                    break;
                case 5:
                    week = "星期五";
                    break;
                case 6:
                    week = "星期六";
                    break;
            }
            var hours = (date.getHours() < 10) ? "0" + date.getHours() : date.getHours();
            var minutes = (date.getMinutes() < 10) ? "0" + date.getMinutes() : date.getMinutes();
            var seconds = (date.getSeconds() < 10) ? "0" + date.getSeconds() : date.getSeconds();
            var today = date.getFullYear() + "年" + (date.getMonth() + 1) + "月"
                + date.getDate() + "日 " + week + " " + hours + ":"
                + minutes + ":" + seconds;
            document.getElementById("today").innerHTML = today;
        }
        window.setInterval("setDateTime()", 1000);
    </script>

</head>

<body class="flat-blue">
<div class="app-container">
    <div class="row content-container">
        <nav class="navbar navbar-default navbar-fixed-top navbar-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-expand-toggle">
                        <span class="fa fa-bars icon"></span>
                    </button>
                    <ol class="breadcrumb navbar-breadcrumb">
                        <li class="active">课程更新</li>
                    </ol>
                    <button type="button" class="navbar-right-expand-toggle pull-right visible-xs">
                        <span style="font-size: 18px" class="glyphicon glyphicon-chevron-left"></span>
                    </button>
                </div>
                <ul class="nav navbar-nav navbar-right">
                    <button type="button" class="navbar-right-expand-toggle pull-right visible-xs">
                        <span style="font-size: 18px" class="glyphicon glyphicon-chevron-up"></span>
                    </button>
                    <%
                        if (null != session.getAttribute("admin")) {%>
                    <li class="admin" style="float: left">
                        <img class="img-responsive" width="80%" height="80%"
                             src="${pageContext.request.contextPath}/images/avtar.png"/>
                    </li>
                    <li class="admin" style="float: left;margin-right: 20px">
                        <h5>欢迎管理员：<span style="color: #dd3e3e"><%=session.getAttribute("admin")%></span></h5>
                        <i class="glyphicon glyphicon-time"></i><span id="today"></span>
                    </li>
                    <%}%>
                </ul>
            </div>
        </nav>
        <div class="side-menu sidebar-inverse">
            <nav class="navbar navbar-default" role="navigation">
                <div class="side-menu-container">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="#">
                            <div class="icon fa  fa-mortar-board"></div>
                            <div class="title">ZhiYou Management
                            </div>
                        </a>
                        <button type="button" class="navbar-expand-toggle pull-right visible-xs">

                        </button>
                    </div>
                    <ul class="nav navbar-nav">
                        <li class="nav-li">
                            <a href="${pageContext.request.contextPath}/index">
                                <span class="icon fa   fa-bars"></span><span class="title">首页</span>
                            </a>
                        </li>
                        <li class="nav-li">
                            <a href="${pageContext.request.contextPath}/admin/list">
                                <span class="icon fa fa-user"></span><span class="title">查看用户</span>
                            </a>

                        </li>
                        <li class="nav-li">
                            <a href="${pageContext.request.contextPath}/admin/show/type">
                                <span class="icon fa fa-pencil"></span><span class="title">添加类型</span>
                            </a>

                        </li>
                        <li class="nav-li">
                            <a href="${pageContext.request.contextPath}/admin/classlist">
                                <span class="icon fa fa-file-o"></span><span class="title">查看课程</span>
                            </a>

                        </li>


                        <li class="nav-li">
                            <a href="${pageContext.request.contextPath}/admin/add/class">
                                <span class="icon fa fa-pencil-square-o"></span><span class="title">添加课程</span>
                            </a>

                        </li>

                        <li id="login-li" class="nav-li">
                            <%--"<% if (null == session.getAttribute("admin")) {%>--%>
                            <%--${pageContext.request.contextPath}/login--%>
                            <%--<%}else {%>--%>
                            <%--<%}%>"--%>
                            <a id="login-a" href="">
                                <span class="icon fa fa-paw"></span><span class="title">登录系统</span>
                            </a>

                        </li>

                        <li id="loginOut-li" class="nav-li">
                            <a id="loginOut-a" href="" onclick="check()">
                                <span class="icon fa fa-reply"></span><span class="title">退出系统</span>
                            </a>

                        </li>
                    </ul>
                </div>

            </nav>
        </div>

        <!-- Main Content -->


        <div class="container-fluid">
            <div class="side-body">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="col-xs-12" style="margin:5% auto;height: auto;width: 100%;text-align: center">
                            <span class="h4" style="font-weight: bold">课程更新</span>
                            <form action="${pageContext.request.contextPath}/admin/update/class" method="post"
                                  role="form"
                                  class="form-horizontal">
                                <div style="margin-top: 2%" class="form-group">
                                    <label class="col-sm-1 col-sm-offset-4 control-label">课程id</label>
                                    <div class="col-sm-3 ">
                                        <input class="form-control btm-input" type="text" name="classId"
                                               value="${aclass.classId}" readOnly="true"/>
                                    </div>
                                </div>
                                <div style="margin-top: 2%" class="form-group">
                                    <label class="col-sm-1 col-sm-offset-4 control-label">课程标题</label>
                                    <div class="col-sm-3 ">
                                        <input class="form-control btm-input" type="text" name="classTitle"
                                               value="${aclass.classTitle}"/>
                                    </div>
                                </div>
                                <div style="margin-top: 2%" class="form-group">
                                    <label class="col-sm-1 col-sm-offset-4 control-label">课程简介</label>
                                    <div class="col-sm-3 ">
                                        <input class="form-control btm-input" type="text" name="classDetail"
                                               value="${aclass.classDetail}"/>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-1 col-sm-offset-4 control-label">课程适应人群</label>
                                    <div class="col-sm-3 ">
                                        <input class="form-control btm-input" type="text" name="classApplyPeople"
                                               value="${aclass.classApplyPeople}"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-1 col-sm-offset-4 control-label">课程价格</label>
                                    <div class="col-sm-3 ">
                                        <input class="form-control btm-input" type="text" name="classPrice"
                                               value="${aclass.classPrice}"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-1 col-sm-offset-4 control-label">课程发布时间</label>
                                    <div class="col-sm-3 ">
                                        <input class="form-control btm-input" type="date"
                                               name="classTime"
                                               value="<fmt:formatDate value="${aclass.classTime}" pattern="yyyy-MM-dd"/>"/>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-1 col-sm-offset-4 control-label">课程状态</label>
                                    <div class="col-sm-3 ">
                                        <select name="classState" class="form-control" id="classState">
                                            <option value=0>上架</option>
                                            <option value=1>下架</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-1 col-sm-offset-4 control-label">课程图片名(原)</label>
                                    <div class="col-sm-3 ">
                                        <input id="img-name" class="form-control btm-input" type="text" name="classImg"
                                               value="${aclass.classImg}" readOnly="true"/>
                                    </div>

                                </div>
                                <div class="form-group">
                                    <label class="col-sm-1 col-sm-offset-4 control-label">课程图片(原)</label>
                                    <div class="col-sm-3 ">
                                        <img id="img-change" width="50px" height="50px"
                                             alt='暂无图片'
                                             src="${pageContext.request.contextPath}/resources/classImg/${aclass.classImg}"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-1 col-sm-offset-4 control-label">选择图片</label>
                                    <div class="col-sm-3 ">
                                        <input type="file" name="fileToUpload" id="fileToUpload" style="opacity: 1"/>
                                        <input type="text" name="compressValue" id="compressValue"
                                               style="display:none;"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-1 col-sm-offset-4 control-label">上传图片</label>
                                    <div class="col-sm-3 ">
                                        <input class="form-control btm-input" type="button" id='uploadBtn'
                                               value="上传课程图片"/>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-1 col-sm-offset-4 control-label">课程学习人数</label>
                                    <div class="col-sm-3 ">
                                        <input class="form-control btm-input" type="text" name="classCount"
                                               value="${aclass.classCount} " readOnly="true"/>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-1 col-sm-offset-4 control-label">课程总体评分</label>
                                    <div class="col-sm-3 ">
                                        <input class="form-control btm-input" type="text" name="classEvaluateGrade"
                                               value="${aclass.classEvaluateGrade} " readOnly="true"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-1 col-sm-offset-4 control-label">课程类型id</label>
                                    <div class="col-sm-3 ">
                                        <input class="form-control btm-input" type="text" name="classTypeId"
                                               value="${aclass.classTypeId}" readOnly="true"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-1 col-sm-offset-4 control-label">课程类型一</label>
                                    <div class="col-sm-3 ">
                                        <input class="form-control btm-input" type="text" name="typeName1"
                                               value="${aclass.typeName1}" readOnly="true"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-1 col-sm-offset-4 control-label">课程类型二</label>
                                    <div class="col-sm-3 ">
                                        <input class="form-control btm-input" type="text" name="typeName2"
                                               value="${aclass.typeName2}" readOnly="true"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-1 col-sm-offset-4 control-label">课程类型三</label>
                                    <div class="col-sm-3 ">
                                        <input class="form-control btm-input" type="text" name="typeName3"
                                               value="${aclass.typeName3}" readOnly="true"/>
                                    </div>
                                </div>
                                <div class="form-group" style="margin-top: 3%">
                                    <input style="margin-left: 3%" class=" btn btn-success btm-input " type="submit"
                                           value="提交"/>
                                    <button style="margin-left: 7%" class=" btn btn-info btm-input "><a
                                            style="color: #fff"
                                            href="${pageContext.request.contextPath}/admin/classlist">取消</a></button>
                                </div>

                            </form>


                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <%--弹出窗--%>

</body>


<!-- Javascript Libs -->
<script type="text/javascript"
        src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript"
        src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

<!-- Javascript -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/indexApp.js"></script>


<script type="text/javascript">
    var admin = <%=session.getAttribute("admin")%>;


    //登录验证
    $("#login-li").click(function () {
        if (admin != null) {
            alert("你已经登录")
        } else {
            $("#login-a").attr('href', '${pageContext.request.contextPath}/login');
        }
    });

    //登出验证
    $("#loginOut-li").click(function () {
        if (admin == null) {
            alert("你还未登录")
        } else {

            if (confirm("您确定要退出吗?")) {
                $("#loginOut-a").attr('href', '${pageContext.request.contextPath}/logout?uname=' + admin);

            }

        }
    });
    var classState =${aclass.classState};
    //上架、下架默认显示
    function selectedClassState() {

        var numbers = $("#classState").find("option"); //获取select下拉框的所有值
        for (var j = 0; j < numbers.length; j++) {
            if ($(numbers[j]).val() == classState) {
                $(numbers[j]).attr("selected", "selected");
            }
        }
    }

    selectedClassState();


    //上传图片预览
    var filechange = function (event) {
        var files = event.target.files, file;
        if (files && files.length > 0) {
            // 获取目前上传的文件
            file = files[0];// 文件大小校验的动作
            if (file.size > 1024 * 1024 * 2) {
                alert('图片大小不能超过 2MB!');
                return false;
            }
            // 获取 window 的 URL 工具
            var URL = window.URL || window.webkitURL;
            // 通过 file 生成目标 url
            var imgURL = URL.createObjectURL(file);
            //用attr将img的src属性改成获得的url
            $("#img-change").attr("src", imgURL);
            // 使用下面这句可以在内存中释放对此 url 的伺服，跑了之后那个 URL 就无效了
//             URL.revokeObjectURL(imgURL);
        }
    };

    //图片上传change事件
    $('#fileToUpload').change(function () {
        filechange(event);
        uploadBtnChange();
    });
    var imagename;
    //提交click事件
    $('#uploadBtn').click(function () {
        var preview = document.getElementById('compressValue').value;
        console.log(preview);
        if (preview) {
            $.ajax({
                url: "${pageContext.request.contextPath}/class/image-upload",
                type: "POST",
                data: {'image': preview},
                dataType: 'json',
                success: function (result) {
                    console.log(result);
                    if (result.error == 0) {
                        imagename = result.data;
                        $("#img-change").attr('src', '${pageContext.request.contextPath}/resources/classImg/' + result.data);
                        $("#img-name").val(result.data);
                        alert(result.msg);
                    } else {
                        imagename = 0;
                        alert("上传头像出错，请重试");
                    }
                },
                error: function () {
                    alert('操作失败，请跟技术联系');
                }
            });
        }
    });


    //压缩后图片生成base64编码
    function uploadBtnChange() {
        if (window.File && window.FileReader && window.FileList && window.Blob) {
            //获取上传file
            var filefield = document.getElementById('fileToUpload'),
                file = filefield.files[0];
            //获取用于存放压缩后图片base64编码
            var compressValue = document.getElementById('compressValue');
            processfile(file, compressValue);
        } else {
            alert("此浏览器不完全支持压缩上传图片");
        }

    }

    function processfile(file, compressValue) {
        var reader = new FileReader();
        reader.onload = function (event) {
            var blob = new Blob([event.target.result]);
            window.URL = window.URL || window.webkitURL;
            var blobURL = window.URL.createObjectURL(blob);
            var image = new Image();
            image.src = blobURL;
            image.onload = function () {
                var resized = resizeMe(image);
                compressValue.value = resized;
            }
        };
        reader.readAsArrayBuffer(file);
    }

    function resizeMe(img) {
        //压缩的大小
        var max_width = 350;
        var max_height = 350;

        var canvas = document.createElement('canvas');
        var width = img.width;
        var height = img.height;
//        if(width > height) {
//            if(width > max_width) {
//                height = Math.round(height *= max_width / width);
//                width = max_width;
//            }
//        }else{
//            if(height > max_height) {
//                width = Math.round(width *= max_height / height);
//                height = max_height;
//            }
//        }
//        width=max_width;
//        height=max_height;
//
//        canvas.width = width;
//        canvas.height = height;

//        var ctx = canvas.getContext("2d");
//        ctx.drawImage(img, 0, 0, width, height);
//        //压缩率
//        return canvas.toDataURL("image/jpeg",0.92);


        canvas.width = max_width;
        canvas.height = max_height;

        var ctx = canvas.getContext("2d");
        //获取需要使用的矩形图片区域
        var real_width = width * max_height / max_width > height ? height * max_width / max_height : width;
        var real_height = width > height * max_width / max_height ? height : width * max_height / max_width;

        //console.log('need:'+real_width+' '+real_height);
        //console.log('real:'+width+' '+height);

        //定位使图片居中
        var img_x = (width - real_width) / 2;
        var img_y = (height - real_height) / 2;

        //清除原来画布内容
        ctx.clearRect(0, 0, max_width, max_height);

        //在画布上渲染头像预览
        ctx.drawImage(img, img_x, img_y, real_width, real_height, 0, 0, max_width, max_height);

        //压缩率
        return canvas.toDataURL("image/jpeg", 0.92);

    }
</script>

</html>